<!DOCTYPE html>
<html>
<head>
    <title>RAG System Interface</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
        .section { margin-bottom: 30px; border-bottom: 1px solid #eee; padding-bottom: 20px; }
        button { padding: 8px 16px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }
        button:hover { background: #0056b3; }
        #results { margin-top: 20px; }
        .source { background: #f5f5f5; padding: 10px; margin: 10px 0; border-radius: 4px; }
    </style>
</head>
<body>
    <h1>文档问答系统</h1>

    <div class="section">
        <h2>上传文档</h2>
        <input type="file" id="documentUpload">
        <button onclick="uploadDocument()">上传并处理</button>
        <div id="uploadStatus"></div>
    </div>

    <div class="section">
        <h2>文档列表</h2>
        <div id="documentList">加载中...</div>
    </div>

    <div class="section">
        <h2>提出问题</h2>
        <textarea id="queryInput" rows="4" style="width: 100%;"></textarea>
        <button onclick="submitQuery()">提交问题</button>

        <div id="results">
            <h3>回答:</h3>
            <div id="answer"></div>

            <h3>来源:</h3>
            <div id="sources"></div>
        </div>
    </div>

    <script>
        // 加载文档列表
        fetch('/api/documents')
            .then(response => response.json())
            .then(data => {
                const list = document.getElementById('documentList');
                if (data.length === 0) {
                    list.innerHTML = '<p>暂无已处理的文档</p>';
                } else {
                    list.innerHTML = '<ul>' + data.map(doc =>
                        `<li>${doc.file_name} (${doc.file_type}, ${Math.round(doc.file_size/1024)}KB)</li>`
                    ).join('') + '</ul>';
                }
            });

        // 上传文档
        function uploadDocument() {
            const fileInput = document.getElementById('documentUpload');
            const statusDiv = document.getElementById('uploadStatus');

            if (fileInput.files.length === 0) {
                statusDiv.innerHTML = '<p style="color: red;">请选择文件</p>';
                return;
            }

            statusDiv.innerHTML = '<p>处理中...</p>';

            const formData = new FormData();
            formData.append('file', fileInput.files[0]);

            fetch('/api/upload', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    statusDiv.innerHTML = `<p style="color: red;">错误: ${data.error}</p>`;
                } else {
                    statusDiv.innerHTML = '<p style="color: green;">文档处理成功! 页面将刷新...</p>';
                    setTimeout(() => location.reload(), 1500);
                }
            })
            .catch(error => {
                statusDiv.innerHTML = `<p style="color: red;">上传失败: ${error}</p>`;
            });
        }

        // 提交查询
        function submitQuery() {
            const query = document.getElementById('queryInput').value.trim();
            const answerDiv = document.getElementById('answer');
            const sourcesDiv = document.getElementById('sources');

            if (!query) {
                alert('请输入问题');
                return;
            }

            answerDiv.innerHTML = '思考中...';
            sourcesDiv.innerHTML = '';

            fetch('/api/query', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ query })
            })
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    answerDiv.innerHTML = `<p style="color: red;">错误: ${data.error}</p>`;
                } else {
                    answerDiv.innerHTML = data.response;

                    if (data.sources && data.sources.length > 0) {
                        sourcesDiv.innerHTML = data.sources.map(source => `
                            <div class="source">
                                <p>${source.text}</p>
                                <small>来源: ${JSON.stringify(source.metadata)}</small>
                            </div>
                        `).join('');
                    }
                }
            })
            .catch(error => {
                answerDiv.innerHTML = `<p style="color: red;">查询失败: ${error}</p>`;
            });
        }
    </script>
</body>
</html>